<template>
	<view class="main"  :style="'padding-top:'+barHeight+'px'">
		<view class="top_nav"  @click="serviceInfo">
			<view class="top_nav_left"  >
				<image @click.stop="back" src="@/static/discover/back.png" class="back" mode=""></image>
				<image :src="$oss(data.avatar)" class="avatar" mode=""></image>
				<strong>{{data.name}}</strong>
			</view>
			<view class="top_nav_right" v-if="data.is_rest == 1">
				<view class="top_nav_right_item"></view>
				<text>忙碌中</text>
			</view>
			<view class="top_nav_right" v-else>
				<view class="top_nav_right_item"></view>
				<text>可服务</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="content"  @scrolltolower="lower">
			
			 <u-swiper  :list="$oss(data.images)" @click="preview" height="750rpx"  radius="0" imgMode="widthFix"></u-swiper>
			<view class="introduct">
				<p>{{data.content}}</p>
			</view>
			<view class="time_juli">
				<strong>{{data.createtime | timeFrom}}</strong>
				<view class="juli">
					<image src="@/static/discover/position.png" mode=""></image>
					<text>{{data.distance}}km</text>
				</view>
			</view>
			<h4 style="padding: 20rpx;">评论</h4>
			
			<view class="comment" v-for="(item,index) in list">
				<view class="comment_list">
					<image :src="$oss(item.user.avatar)" mode=""></image>
					<view class="comment_list_left">
						<strong>{{item.user.nickname}}</strong>
						<text>{{item.createtime | timeFrom}}</text>
						<p>{{item.content}}</p>
					</view>
				</view>
			</view>
			
			<view class="block" style="width: 100vw; height: 200rpx;">
				
			</view>
			<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
					</u-empty>
		</scroll-view>
		<view class="footer">
			<view class="input_box" @click="$authTo('/pages/discover/comment?id='+data.id)">
				<view class="words">说些什么吧...</view>
				<!-- <input type="text" class="words" readonly v-model="content" placeholder="说些什么吧..." > -->
				<!-- <text v-if="content!=''">发送</text> -->
			</view>
			<view class="bottom_left">
				<view class="bottom_left_item" @click="like">
					<image v-if="data.likeStatus"  src="@/static/discover/good.png" mode=""></image>
					<image v-else  src="@/static/discover/nogood.png" mode=""></image>
					<text>{{data.likes}}</text>
				</view>
				<view class="bottom_left_item">
					<image src="@/static/discover/comments.png" mode=""></image>
					<text>{{data.comments}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				show:1,
				content:'',
				id: '',
				barHeight: '',
				lng:uni.getStorageSync('lng'),
				lat:uni.getStorageSync('lat'),
				data: '',
				list: [],
				finish: false,
				page: 1,
				location: ''
			};
		},
		onLoad(option) {
			this.id = option.id
			this.barHeight = uni.getSystemInfoSync().statusBarHeight;
			this.getInfo()
			this.getlist()
			uni.$on('comment',()=>{
				this.getInfo()
				this.reload()
			})
		},
		methods:{
			...mapActions(['getLocation']),
			async getInfo() {
				if (!this.$store.state.location) {
					await this.getLocation()
				}
				this.location = this.$store.state.location
				this.getDetail()
			},
			// 跳转理疗师详情页
			serviceInfo() {
				if (this.data.is_rest == 1) {
					uni.$u.toast('该理疗师暂无法接单')
					return
				}
				
				uni.$u.route({
					url: '/pages_technician/jsDetails/jsDetails',
					params: {
						id: this.data.service_id,
						lng: this.location.lng,
						lat: this.location.lat
					}
				})
			},
			preview(e){
				
				let arr = this.$oss(this.data.images)
				uni.previewImage({
				    current: e,
				    urls: arr
				})
			},
			like(){
				this.$api.post('/discoverlike',{
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.data.likeStatus = res.data
						this.getInfo()
						uni.$emit('likes')
					}
				}).catch((res) => {
							
				})
			},
			getDetail(){
				this.$api.post('/discover',{
					id: this.id,
					lng: this.location.lng,
					lat: this.location.lat,
				}).then(res => {
					if (res.code == 1) {
						res.data.images = res.data.images.split(',')
						this.data = res.data
					}
				}).catch((res) => {
							
				})
			},
			reload(){
				this.page = 1;
				this.finish = false
				this.list = []
				this.getlist()
			},
			lower() {
				this.page++
				this.getlist()
			},
			getlist() {
				if (this.finish) {
					return
				}
				this.$api.post('/commentlist', {
					page: this.page,
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						
						this.list = this.list.concat(res.data)
			
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
			
				})
			},
			back(){
				uni.navigateBack({delta:1})
			},
		}
	}
</script>

<style lang="scss">
	.main .u-swiper__wrapper__item__wrapper{
		align-items: center;
		justify-content: center;
	}
	.main{
		height: calc(100vh - var(--window-bottom));
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background: #fff;
		.content{
			flex: 1;
			overflow: hidden;
		}
	}
.top_nav{
	background: #fff;
	height: 44px;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.top_nav_left{
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			margin: 0 20rpx;
		}
		.back{
			width: 16rpx;
			height: 32rpx;
		}
		.avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}
	.top_nav_right{
		font-size: 20rpx;
		display: flex;
		align-items: center;
		color: #00CE9B;
		padding: 10rpx 20rpx;
		background: #F7F7FA;
		border-radius: 44rpx;
		.top_nav_right_item{
			width: 12rpx;
			height: 12rpx;
			background: #00CE9B;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
}
.bgimg{
	margin: 20rpx 0;
	width: 100vw;
	height: 880rpx;
}
.introduct{
	padding: 20rpx;
	font-size: 28rpx;
}
.time_juli{
	font-size: 24rpx;
	padding: 20rpx;
	display: flex;
	.juli{
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		color: #8D93A5;
		image{
			width: 20rpx;
			height: 23rpx;
			margin-right: 10rpx;
		}
	}
}
.comment{
	border-top: 1px solid #EBEBEB;
	padding: 30rpx 0 10rpx;
	.comment_list{
		display: flex;
		padding: 0 20rpx;
		
		image{
			min-width: 76rpx;
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.comment_list_left{
			display: flex;
			// align-items: center;
			flex-direction: column;
			strong{
				margin: 10rpx 0 20rpx;
				font-size: 26rpx;
			}
			text{
				margin: 10rpx 0 20rpx;
				font-size: 22rpx;
				color: #999999;
			}
			p{
				margin: 10rpx 0 20rpx;
				font-size: 26rpx;
			}
		}
	}
}


.footer{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	height: 100rpx;
	padding:10rpx 20rpx 30rpx;
	.input_box{
		display: flex;
		align-items: center;
		background: #FAFAFA;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		flex: 1;
		.words{
			color: #BFBFBF;
			font-size: 26rpx;
		}
	}
	.bottom_left{
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.bottom_left_item{
			display: flex;
			margin-left: 30rpx;
			image{
				width: 37rpx;
				height: 39rpx;
				margin-right: 10rpx;
			}
			text{
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
}
</style>
